<template>
  <view class="classification">
    <scroll-view
        class="scroll1"
        scroll-x="true"
        scroll-with-animation
        :scroll-left="tabsScrollLeft"
        @scroll="onScroll"
    >
      <view
          class="swipers"
          id="tab_list"
          :style="{ justifyContent: navList.length < 6 ? 'space-around' : '' }"
      >
        <view
            id="tab_item"
            class="text"
            :class="currentTab == index ? 'select' : ''"
            :data-current="index"
            :data-title="item.title"
            @click="swichNav"
            v-for="(item, index) in navList"
            :key="index"
        >{{ item.title }}
        </view>
      </view>
    </scroll-view>
    <swiper
        :current="currentTab"
        @change="bindChange"
        class="swp"
        :style="{ height: aheight ? aheight + 'px' : 'auto' }"
        v-if="isType"
    >
      <block v-for="(item, index) in slotList" :key="index">
        <swiper-item>
          <slot v-bind="{ item, $index: index }"></slot>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    //是否要展示数据
    isType: {
      type: Boolean,
      default: false,
    },
    //导航名称
    navList: {
      type: Array,
      required: true,
    },
    //数据
    slotList: {
      type: Array,
      default() {
        return []
      },
    },
    currentTab: {
      type: Number,
      default: 0, //第几项
    },
  },
  data() {
    return {
      aheight: '', //高度
      tabsScrollLeft: 0, // tabs当前偏移量
      scrollLeft: 0, //向左滚动多少距离
      lineStyle: {}, // 下划线位置--动态甲酸
      duration: 0.2, // 下划线动画时长
    }
  },
  watch: {
    currentTab(newVal) {
      // 监听当前选中项
      this.setTabList()
    },
  },

  onShow() {
    // 动态获取滑动页面高度
    const query = uni.createSelectorQuery().in(this)
    query
        .select('.list')
        .boundingClientRect((data) => {
          this.aheight = data.height
        })
        .exec()
  },
  mounted() {
    this.setTabList()
  },
  methods: {
    onScroll(e) {
      this.scrollLeft = e.detail.scrollLeft
    },
    setTabList() {
      this.$nextTick(() => {
        this.setLine()
        this.scrollIntoView()
      })
    },

    scrollIntoView() {
      let lineLeft = 0
      this.getElementData('#tab_list', (data) => {
        const list = data[0]
        this.getElementData(`#tab_item`, (data) => {
          const el = data[this.currentTab]
          lineLeft = el.width / 2 + -list.left + el.left - list.width / 2 - this.scrollLeft
          this.tabsScrollLeft = this.scrollLeft + lineLeft
        })
      })
    },
    // 滑动页面同步tab栏
    bindChange(e) {
      //this.currentTab = e.detail.current
      this.$emit('change', e.target.dataset.title, e.target.dataset.current)
    },
    //点击tab切换
    swichNav(e) {
      // if (this.currentTab === e.target.dataset.current) {
      //   return false
      // } else {
      //   this.currentTab = e.target.dataset.current
      //
      this.$emit('click', e.target.dataset.title, e.target.dataset.current)
    },
    //  计算下划线位置
    setLine() {
      let lineWidth = 0
      let lineLeft = 0
      this.getElementData(`#tab_item`, (data) => {
        const el = data[this.currentTab]
        lineWidth = el.width / 2
        // lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
        lineLeft = el.width / 2 + -data[0].left + el.left
        this.lineStyle = {
          width: `${lineWidth}px`,
          transform: `translateX(${lineLeft}px) translateX(-50%)`,
          transitionDuration: `${this.duration}s`,
        }
      })
    },
    //选择el类型
    getElementData(el, callback) {
      uni
          .createSelectorQuery()
          .in(this)
          .selectAll(el)
          .boundingClientRect()
          .exec((data) => {
            callback(data[0])
          })
    },
  },
}
</script>

<style scoped lang="scss">
.classification {
  .scroll1 {
    width: 100%;
    padding-top: 26rpx;
    .swipers {
      display: flex;
      justify-content: flex-start;
      padding-bottom: 19rpx;
      .text {
        white-space: nowrap;
        font-size: 32rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #222222;
        padding: 0 35rpx 0 0;
      }
      .select {
        font-weight: bold;
        color: #3389ed;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          left: 25%;
          bottom: -12rpx;
          width: 41rpx;
          height: 3rpx;
          background: #006be8;
          border-radius: 1px;
          transform: translate(-25%, 0);
        }
      }
    }
  }
}
</style>
